<template>
  <div class="court-booking-container">
    <div class="court-booking-header">
      <h2>羽毛球场地预约</h2>
    </div>

    <!-- 场地列表 -->
    <div class="courts-list">
      <div class="court-card" v-for="court in courts" :key="court.id">
        <div class="court-info">
          <h3>{{ court.name }}</h3>
          <p class="court-location">{{ court.location }}</p>
          <p class="court-price">价格: ¥{{ court.price }}/小时</p>
          <div class="court-status" :class="court.available ? 'available' : 'unavailable'">{{ court.available ? '可预约' : '已满' }}</div>
        </div>

        <div class="booking-section" v-if="court.available">
          <div class="booking-form" v-if="!showBookingForm">
            <p>选择日期和时间段进行预约:</p>
            <div class="date-selector">
              <label for="bookingDate">{{ selectedDate }}</label>
              <input
                type="date"
                id="bookingDate"
                v-model="selectedDate"
                @change="updateAvailableTimeSlots"
              />
            </div>
            <div class="time-slots">
              <div class="time-slot" v-for="slot in availableTimeSlots" :key="slot.time"
                @click="selectedTimeSlot = slot.time">{{ slot.time }}
                <span v-if="selectedTimeSlot === slot.time" class="selected-marker">✓</span>
              </div>
            </div>
            <button @click="handleBooking" class="book-btn">立即预约</button>
          </div>
        </div>
      </div>
    </div>

    <!-- 预约成功提示 -->
    <div class="success-modal" v-if="showSuccessModal">
      <div class="modal-content">
        <h3>预约成功！</h3>
        <p>场地: {{ bookedCourtName }}</p>
        <p>日期: {{ formatDate(selectedDate) }}</p>
        <p>时间: {{ selectedTimeSlot }}</p>
        <p>您的预约已成功提交，请准时前往使用。</p>
        <button @click="showSuccessModal = false" class="ok-btn">确定</button>
      </div>
    </div>
  </div>
</template>

<script setup>
import { ref, onMounted } from 'vue';
import { useStore } from 'vuex';
import { useRouter } from 'vue-router';

const store = useStore();
const router = useRouter();

// 状态管理
const showBookingForm = ref(false);
const showSuccessModal = ref(false);
const selectedDate = ref('');
const selectedTimeSlot = ref('');
const bookedCourtName = ref('');

// 场地数据
const courts = ref([
  { id: 1, name: '羽毛球场A', location: '1号馆1楼', price: 50, available: true },
  { id: 2, name: '羽毛球场B', location: '1号馆2楼', price: 50, available: true },
  { id: 3, name: '羽毛球场C', location: '2号馆1楼', price: 60, available: true },
  { id: 4, name: '羽毛球场D', location: '2号馆2楼', price: 60, available: false }
]);

// 可用时间段
const availableTimeSlots = ref([
  { time: '08:00-09:00', available: true },
  { time: '09:00-10:00', available: true },
  { time: '10:00-11:00', available: true },
  { time: '11:00-12:00', available: false },
  { time: '14:00-15:00', available: true },
  { time: '15:00-16:00', available: true },
  { time: '16:00-17:00', available: true },
  { time: '17:00-18:00', available: false },
  { time: '18:00-19:00', available: true },
  { time: '19:00-20:00', available: true },
  { time: '20:00-21:00', available: true }
]);

onMounted(() => {
  // 设置默认日期为今天
  const today = new Date().toISOString().split('T')[0];
  selectedDate.value = today;
});

// 格式化日期
const formatDate = (dateString) => {
  if (!dateString) return '';
  const date = new Date(dateString);
  return date.toLocaleDateString('zh-CN', {
    year: 'numeric',
    month: 'long',
    day: 'numeric'
  });
};

// 更新可用时间段（模拟）
const updateAvailableTimeSlots = () => {
  // 在实际应用中，这里应该从服务器获取该日期的可用时间段
  console.log('更新日期:', selectedDate.value);
};

// 处理预约
const handleBooking = () => {
  // 检查登录状态
  if (!store.getters.isLoggedIn) {
    if (confirm('请先登录后再进行预约，是否前往登录？')) {
      router.push('/login');
    }
    return;
  }

  if (!selectedTimeSlot.value) {
    alert('请选择预约时间段');
    return;
  }

  // 模拟预约成功
  bookedCourtName.value = courts.value[0].name; // 简化处理，实际应根据选择的场地
  showSuccessModal.value = true;
};
</script>

<style scoped>
.court-booking-container {
  max-width: 1200px;
  margin: 0 auto;
  padding: 2rem;
}

.court-booking-header {
  text-align: center;
  margin-bottom: 2rem;
}

.court-booking-header h2 {
  color: #2196F3;
  margin: 0;
}

.courts-list {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  gap: 2rem;
}

.court-card {
  border: 1px solid #e0e0e0;
  border-radius: 12px;
  padding: 1.5rem;
  box-shadow: 0 3px 10px rgba(0,0,0,0.05);
  transition: transform 0.3s;
}

.court-card:hover {
  transform: translateY(-5px);
}

.court-info h3 {
  color: #2196F3;
  margin-top: 0;
}

.court-location {
  color: #666;
  margin: 0.5rem 0;
}

.court-price {
  color: #4CAF50;
  font-weight: 500;
}

.court-status {
  display: inline-block;
  padding: 0.3rem 0.6rem;
  border-radius: 4px;
  font-size: 0.9rem;
  font-weight: 500;
  margin-bottom: 1rem;
}

.available {
  background-color: #e8f5e9;
  color: #4CAF50;
}

.unavailable {
  background-color: #ffebee;
  color: #f44336;
}

.booking-section {
  margin-top: 1.5rem;
  padding-top: 1.5rem;
  border-top: 1px dashed #eee;
}

.date-selector {
  margin-bottom: 1rem;
}

input[type="date"] {
  padding: 0.6rem;
  border: 1px solid #ddd;
  border-radius: 6px;
  width: 100%;
  margin-top: 0.5rem;
}

.time-slots {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(100px, 1fr));
  gap: 0.5rem;
  margin: 1rem 0;
}

.time-slot {
  padding: 0.6rem;
  border: 1px solid #ddd;
  border-radius: 6px;
  text-align: center;
  cursor: pointer;
  transition: all 0.2s;
  position: relative;
}

.time-slot:hover {
  border-color: #2196F3;
  background-color: #f0f7ff;
}

.selected-marker {
  color: #4CAF50;
  position: absolute;
  right: 5px;
  top: 2px;
}

.book-btn {
  background: linear-gradient(135deg, #4CAF50 0%, #2196F3 100%);
  color: white;
  border: none;
  padding: 0.8rem 1.5rem;
  border-radius: 6px;
  cursor: pointer;
  font-weight: 500;
  width: 100%;
  margin-top: 1rem;
}

/* 成功提示模态框 */
.success-modal {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0,0,0,0.5);
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 1000;
}

.modal-content {
  background-color: white;
  padding: 2rem;
  border-radius: 12px;
  text-align: center;
  width: 90%;
  max-width: 400px;
}

.modal-content h3 {
  color: #4CAF50;
  margin-top: 0;
}

.ok-btn {
  background: linear-gradient(135deg, #4CAF50 0%, #2196F3 100%);
  color: white;
  border: none;
  padding: 0.6rem 1.5rem;
  border-radius: 6px;
  cursor: pointer;
  font-weight: 500;
  margin-top: 1rem;
}

.no-courts {
  text-align: center;
  padding: 3rem;
  color: #777;
}
</style>